<template>
  <div id="qixiHome">
    <div class="top">
      <div class="item" @click="showRuleClick">活动规则</div>
      <div class="item" @click="showPaiClick">排行榜</div>
    </div>
    <!-- 我也要表白 -->
    <div class="btn" @click="biaobaiClick"></div>
    <!-- 是否关注 -->
    <div class="modal" v-if="isShow">
      <div class="modal-body">
        <img :src="shareImg" />
        <div @click="closeBtnClick" class="close"></div>
      </div>
    </div>
    <!-- 活动规则 -->
    <qixiguide></qixiguide>
    <!-- 排行榜-->
    <qixipai></qixipai>
    <!-- 判断手机号 -->
    <div class="modal2" v-if="isShow2">
        <div class="modal-body">
            <div class="title">联系方式</div>
            <div class="text">每日排名第一的玩家，即获得秒台车免费代送给ta的鲜花一束，
                快准备好您的信息，冲击榜单吧!</div>
            <div class="line">
              <label>姓名</label>
              <input v-model="username" maxlength="8" placeholder="输入姓名" />
            </div>
            <div class="line">
              <label>手机号</label>
              <input v-model="tel" type="tel" style="margin-bottom: 20px;" placeholder="输入手机号" />
            </div>
            <div @click="isShow2 = false" class="cancleBtn">取消</div>
            <div @click="okBtnClick" class="okBtn">确定</div>
        </div>
    </div>
  </div>
</template>

<script>
import Qixiguide from '@/components/common/qixguide.vue'
import Qixipai from '@/components/common/paihang.vue'
export default {
  name: 'qixiHome',
  data () {
    return {
      // 是否关注
      isShow: false,
      shareImg: require('../../assets/images/miaotaiche.png'),
      isOk: 0,
      myopenid: '',
      usertel: '',
      isShow2: false,
      tel: '',
      username: '',
    }
  },
  components: {
    Qixiguide,
    Qixipai
  },
  mounted(){
    this.getWeXinInfo();
  },
  watch:{
    isOk(ov,nv){
      if (this.isOk == 2) {
        var self = this;
        var openid = self.$utils.getquerystring('state') || '';
        openid = openid.split('?')[0] || '';
        var fopenid = '';
        var wexinInfo = JSON.parse(localStorage.getItem('wexinInfo'));
        if (openid == '') {
            fopenid = wexinInfo.openid || '';
        } else {
            fopenid = openid;
        }
        if (openid == '') {
          // 获取我的录音
          self.$axios.get('getvoice',{
            params: {
                openid: fopenid
            }
          }).then(function (res){
            // alert(JSON.stringify(res));
            if (res.data.status == 100) {
              if (res.data.data.openid != '') {
                // alert(res.data.data.openid);
                localStorage.setItem('fromopenid',wexinInfo.openid);
                setTimeout(function(){
                  var url = '/qixiResult';
                  self.$router.push(url);
                },180);
              }
            }
          }).catch(function (err){

          });
        }else{
          // alert('2');
          localStorage.setItem('fromopenid',openid);
          setTimeout(function(){
            var url = '/qixiResult';
            self.$router.push(url);
          },180);
        }
      }
    }
  },
  activated(){
    this.wx_config();
    this.showRuleClick();
  },
  methods: {
    // 显示规则
    showRuleClick:function(){
      this.$HUB.$emit('showGuide');
    },
    isTelOK: function(){
      var self = this;
      var wexinInfo = JSON.parse(localStorage.getItem('wexinInfo'));
      self.$axios.get('userInfo3',{
        params: {
          openid: wexinInfo.openid || ''
        }
      }).then(function (res){
        if(res.data.status == 100){
          self.usertel = res.data.data.usertel;
          if (self.usertel == '') {
            self.isShow2 = true;
          }else{
            self.isShow2 = false;
            setTimeout(function(){
              self.$HUB.$emit('showPai');
            },200);
          }
        }else{
            self.isShow = true;
        }
      }).catch(function (err){

      })
    },
    // 确定输入手机号
    okBtnClick: function(){
      var self = this;
      var wexinInfo = JSON.parse(localStorage.getItem('wexinInfo'));
      if (self.username == '') {
        alert('请输入您的姓名');
        return;
      }
      if (!self.$utils.checkTel(self.tel)) {
        alert('请输入正确的手机号');
        return;
      }
      self.$axios.get('adduserInfo3',{
        params: {
          openid: wexinInfo.openid || '',
          usertel: self.tel,
          username: self.username
        }
      }).then(function (res){
        self.isShow2 = false;
        setTimeout(function(){
            self.$HUB.$emit('showPai');
        },200);
      }).catch(function (err){

      })
    },
    // 显示排行榜
    showPaiClick: function(){
      this.isTelOK();
    },
    // 表白按钮点击时间
    biaobaiClick: function(){
      this.$router.push('/qixiLu')
    },
    // 微信配置
    wx_config: function(){
      var self = this;
      var pageUrl = self.$utils.getBaseUrl();
      self.$axios.get('wx_config2',{
        params: {
          pageUrl: pageUrl
        }
      }).then(function (res){
      	 var data = res.data;
        wx.config({
          debug: false,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.nonceStr,
          signature: data.signature,
          jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
        });
        wx.ready(function(){
          console.log('ready');
          self.isOk = self.isOk + 1;
          // 微信好友分享
          wx.onMenuShareAppMessage(self.$utils.shareData2);
          // 朋友圈分享
          wx.onMenuShareTimeline(self.$utils.shareData2);
          wx.error(function(res){
    		    console.log('失败');
          });
        });
      }).catch(function (error) {

      });
  	},
    // 关闭
    closeBtnClick: function(){
      this.isShow = false;
    },
    // 获取用户的 微信信息
    getWeXinInfo: function(){
      var self = this;
      var code = self.$utils.getquerystring('code') || '';
      var ip = returnCitySN.cip;
      console.log('code = ' + code);
      // return;
      self.$axios.get('userInfo2',{
        params: {
          code: code,
          ip: ip
        }
      }).then(function (res){
        // alert(JSON.stringify(res));
        if (res.data.status == 100) {
          self.$utils.wxInfo = res.data.data;
          localStorage.setItem('wexinInfo',JSON.stringify(res.data.data));
          self.isShow = false;
          self.isOk = self.isOk + 1;
        } else {
          self.isShow = false;
        }
      }).catch(function (error) {
        // self.isShow = true;
      });
    },
  },
}
</script>
<style scoped lang="less">
.modal2{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .modal-body{
    width: 750px;
    height: 1037px;
    border-radius: 12px;
    margin: auto;
    text-align: center;
    font-size: 40px;
    color: #333333;
    padding-bottom: 20px;
    background-image: url(../../assets/images/qi_guide_02.png);
    background-position: center center;
    background-size: 750px 1037px;
    background-repeat: no-repeat;
    .title{
      color: #5c2424;
      padding-top: 22px;
    }
    .text{
        font-size: 30px;
        color: #444444;
        margin: auto;
        text-align: left;
        width: 500px;
        padding-top: 20px;
        line-height: 50px;
        margin-bottom: 30px;
        color: #5c2424;
    }
    .line{
      label {
        display: inline-block;
        width: 120px;
        margin-bottom: 40px;
        color: #5c2424;
      }
      input {
        margin-top: 20px;
        padding: 0 10px;
        height: 88px;
        line-height: 88px;
        border: solid 1px #999999;
        outline: none;
        border-radius: 8px;
        width: 400px;
        border: solid 1px #873636;
        border-radius: 4px;
      }
    }
    .cancleBtn{
      display: inline-block;
      width: 180px;
      height: 80px;
      line-height: 80px;
      box-shadow: 0 0 0 1px #cb5364;
      border-radius: 30px;
      border: solid 3px white;
      background-color: #cb5364;
      border-radius: 40px;
      color: white;
      font-size: 30px;
      margin-top: 50px;
    }
    .okBtn{
      width: 180px;
      height: 80px;
      line-height: 80px;
      display: inline-block;
      box-shadow: 0 0 0 1px #cb5364;
      border-radius: 30px;
      border: solid 3px white;
      background-color: #cb5364;
      border-radius: 40px;
      color: white;
      font-size: 30px;
      margin-top: 50px;
    }
  }
}
#qixiHome{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url('../../assets/images/bg01.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.modal{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .modal-body{
    width: 400px;
    height: 600px;
    border-radius: 12px;
    margin: 380px auto 0;
    text-align: center;
    img{
      width: 337px;
      height: 430px;
      display: inline-table;
      margin: auto;
    }
    position: relative;
    .close{
      width: 70px;
      height: 70px;
      position: absolute;
      top: -35px;
      right: -35px;
      background-image: url(../../assets/images/icon_close.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 60px 60px;
    }
  }
}
.top{
  color: #873636;
  font-size: 28px;
  height: 40px;
  margin-right: 40px;
  margin-top: 60px;
  .item{
    float: right;
    width: 150px;
    text-align: center;
    height: 40px;
  }
}
.btn{
  position: absolute;
  bottom: 70px;
  width: 750px;
  height: 91px;
  background-image: url(../../assets/images/icon_biaobai.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 342px 91px;
}
</style>
